<template>
    <div style="width: 100%; height: 100%; overflow: hidden;">
        <Card title="股票价格">
            <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                <ButtonGroup>
                    <Button :type="chartType === 'bar' ? 'primary' : 'default'" @click="changeChartType('bar')">柱状图</Button>
                    <Button :type="chartType === 'line' ? 'primary' : 'default'" @click="changeChartType('line')">折线图</Button>
                </ButtonGroup>
                <DatePicker type="daterange" v-model="dateRange" placement="bottom-end" placeholder="选择日期范围" :clearable="false" @on-change="filterDataByDate" ></DatePicker>
            </div>
            <div ref="chart" style="width: 100%; height: 600px;"></div>
        </Card>
    </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: "chart",
    data() {
        return {
            echarts: null,
            chartType: 'bar',
            dateRange: [
                '2025-02-01',
                '2025-02-28'
            ],
            originalData: this.generateCurrentMonthData(),
            filteredData: []
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.filteredData = this.originalData;
            this.init()
        })
    },
    methods: {
        init() {
            let myChart = echarts.init(this.$refs.chart);
            this.echarts = myChart;
            this.updateChart();
        },
        updateChart() {
            const { chartType, filteredData } = this;
            const xAxisData = filteredData.map(item => item.date);
            const seriesData = filteredData.map(item => item.value);

            this.echarts.setOption({
                title: {
                    text: '股票价格'
                },
                tooltip: {},
                legend: {
                    data: ['股票价格']
                },
                xAxis: {
                    data: xAxisData,
                    axisLabel: {
                        rotate: 30, // 旋转90度
                        interval: 0, // 强制显示所有标签
                        margin: 10 // 标签与轴线的距离
                    }
                },
                yAxis: {},
                series: [{
                    name: '股票价格',
                    type: chartType,
                    data: seriesData
                }]
            });
        },
        changeChartType(type) {
            this.chartType = type;
            this.updateChart();
        },
        filterDataByDate(dates) {
            if (dates && dates.length === 2) {
                const startDate = new Date(dates[0]);
                const endDate = new Date(dates[1]);
                this.filteredData = this.originalData.filter(item => {
                    const date = new Date(item.date);
                    return date >= startDate && date <= endDate;
                });
            } else {
                this.filteredData = this.originalData;
            }
            this.dateRange = dates;
            this.updateChart();
        },
        generateCurrentMonthData() {
            const now = new Date();
            const year = now.getFullYear();
            const month = now.getMonth();
            const daysInMonth = new Date(year, month + 1, 0).getDate();
            const data = [];
            for (let i = 1; i <= daysInMonth; i++) {
                const date = new Date(year, month, i);
                const formattedDate = `${year}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
                const value = Math.floor(Math.random() * 300) + 100; // 随机生成股票价格
                data.push({date: formattedDate, value: value});
            }
            return data;
        }
    }
}
</script>

<style scoped>
/deep/ .ivu-card {
    display: flex;
    flex-direction: column;
}

/deep/ .ivu-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/deep/ .ivu-card-body > div {
    flex: 1;
}
</style>
